<%@page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="/common/session.jsp"%>
<c:set var="categoryId" value="${param.categoryId}" />
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
    <title></title>
    <link rel="stylesheet" href="${ctx}/css/default.css"/>
    <script type="text/javascript" src="${ctx}/js/xtable.js"></script>
    <script type="text/javascript" src="${ctx}/js/calendar/WdatePicker.js"></script>
    <script type="text/javascript" src="${ctx}/dwr/engine.js"></script>
    <script type="text/javascript" src="${ctx}/dwr/util.js"></script>
    <script type='text/javascript' src='${ctx}/dwr/interface/CategoryService.js'></script>
    <script type='text/javascript' src='${ctx}/dwr/interface/BookService.js'></script>
    <script type="text/javascript" src="${ctx}/js/loading.js"></script>
</head>
<body onload="selectCategory()">
<table width="100%">
    <tr>
        <td width="50%" valign="top">
            <SCRIPT LANGUAGE="JavaScript" >
                var bookThead = new Array(
                    new XThead("选择", "radio"),
                    new XThead("图书名称"),
                    new XThead("图书封面")
                );

                var bookXTable = new XTable("book", bookThead);

                bookXTable.XTbodyArray = function (model) {
                    var array = new Array(
                        new XTbody("book", model.bookId, "radio", "onclick='setBook(this)'", model),
                        new XTbody("book", model.bookTitle),
                        new XTbody("book", "<a href='" + model.bookFile + "' target='_blank'><img width=50 height=60 style='border:1px solid #c9c9c9' onerror='' src='" + model.bookCover + "'/></a>", "string", null, null, "center")
                    );
                    return array;
                }

                bookXTable.getXList = function (page){
                    var book = dwr.util.getValues("bookForm");
                    book.pageIndex = page;
                    book.pageSize = bookXTable.pageSize;
                    BookService.selectBookList(book, function(list){bookXTable.addTable(list);});
                }

                function selectBookPage(){
                    var book = dwr.util.getValues("bookForm");
                    BookService.selectBookNum(book, function(num){bookXTable.setTotalPage(num);});
                }
            </SCRIPT>
        </td>
        <td width="50%" valign="top">
            <form id="bookForm" name="bookForm" onsubmit="return submitBook();">
                <input type="hidden" id="bookId" name="bookId" value="">
                <input type="hidden" id="bookCover" name="bookCover">
                <input type="hidden" id="bookFile" name="bookFile">
                <table width="100%" height="100%" cellspacing="5" cellpadding="5">
                    <tr>
                        <td>
                            <input type="file" id="bookCoverFile" name="bookCoverFile" style="display: none;" placeholder="图书封面" accept="image/jpeg" onchange="$('bookCoverButton').innerText=this.value;"/>
                            <button type="button" id="bookCoverButton" name="bookCoverButton" style="width: 100%" onclick="document.bookForm.bookCoverFile.click()">上传图书封面</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="file" id="bookFileFile" name="bookFileFile" style="display: none;" placeholder="图书文件" accept="application/pdf" onchange="$('bookFileButton').innerText=this.value;$('bookTitle').value=this.value.substring(this.value.lastIndexOf('\\') + 1, this.value.lastIndexOf('.'));" />
                            <button type="button" id="bookFileButton" name="bookFileButton" style="width: 100%" onclick="document.bookForm.bookFileFile.click()">上传图书文件</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" id="bookTitle" name="bookTitle" maxlength="50" placeholder="图书名称" required/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" id="bookAuthor" name="bookAuthor" maxlength="50" placeholder="图书作者"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" id="bookPress" name="bookPress" maxlength="200" placeholder="图书出版社"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" id="bookBrief" name="bookBrief" maxlength="50" placeholder="图书简介"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <select id="categoryId" name="categoryId" required>
                                <option value="">请选择类别</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <button type="button" onclick="selectBookPage()">查询</button>
                            <button type="button" onclick="insertBook()">新增</button>
                            <button type="button" onclick="updateBook()">修改</button>
                            <button type="button" onclick="deleteBook()">删除</button>
                            <button type="submit" id="submitBookButton" style="visibility: hidden"></button>
                        </td>
                    </tr>
                </table>
            </form>
        </td>
    </tr>
</table>
</body>
</html>
<script>
    function selectCategory() {
        var category = new Category();
        category.categoryParentId = 1;
        CategoryService.selectCategoryList(category, function(list){
            dwr.util.addOptions("categoryId", list, "categoryId", "categoryName");
            dwr.util.setValue("categoryId", "${categoryId}");
            selectBookPage();
        });
    }

    function setBook(obj) {
        var book = obj.parentElement.parentElement.model;
        dwr.util.setValues(book);
    }

    function submitBook() {
        var bookId = dwr.util.getValue("bookId");
        var confirmMsg = bookId ? "确定修改图书" : "确定新增图书";
        if (confirm(confirmMsg)) {
            var book = dwr.util.getValues("bookForm");
            var bookCoverValue = document.getElementById("bookCoverFile").value;
            var bookCoverFile = bookCoverValue == "" ? null : dwr.util.getValue("bookCoverFile");
            var bookFileValue = document.getElementById("bookFileFile").value;
            var bookFileFile = bookFileValue == "" ? null : dwr.util.getValue("bookFileFile");
            if (bookId) {
                BookService.updateBook(book, bookCoverFile, bookFileFile, selectBookPage);
            } else {
                if (bookCoverValue == "" || bookFileValue == "") {
                    alert("请添加图书封面和文件")
                    return false;
                }
                BookService.insertBook(book, bookCoverFile, bookFileFile, selectBookPage);
            }
        }
        return false;
    }

    function insertBook() {
        dwr.util.setValue("bookId", "");
        $("submitBookButton").click();
    }

    function updateBook() {
        var bookId = dwr.util.getValue("bookId");
        if (!bookId) {
            alert("请选择要修改的图书");
            return false;
        }
        $("submitBookButton").click();
    }
    
    function deleteBook() {
        var bookId = dwr.util.getValue("bookId");
        if (!bookId) {
            alert("请选择要删除的图书");
            return false;
        }
        if (confirm("确定删除图书")) {
            var book = dwr.util.getValues("bookForm");
            BookService.deleteBook(book, selectBookPage);
        }
    }
</script>
